<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../font_l44ykp8rawg/iconfont.css">
    <link rel="stylesheet" href="../css/shopcar.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
    <header>
        <h4>
            购物车
        </h4>
    </header>
    <section>
        <article class="top">
            <span>编辑</span>
        </article>
        <div class="oUl">
            <!-- <article class="shoplist" style="margin-bottom: 0.15rem">
                    
                    <input name="checkbox"  type="checkbox" class="tui-checkbox one-btn">
                    <div class="pho">
                    </div>
                    <div class="detail">
                        <p class="chen">一直被模仿，从未被超越</p>
                        <p class="dcolor">颜色: 深蓝色</p>
                        <p class="dsize">尺码:L</p>
                        <div class="chaozuo">
                            <p class="single">￥1589</p>
                            <span class="sub">-</span>
                            <span class="shu">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>

            </article>
            <article class="shoplist"  style="margin-bottom: 0.15rem">
                    
                    <input name="checkbox"  type="checkbox" class="tui-checkbox one-btn">
                    <div class="pho">
                    </div>
                    <div class="detail">
                        <p class="chen" style="position: absolute">一直被模仿，从未被超越</p>
                        <p class="dcolor">颜色: 深蓝色</p>
                        <p class="dsize">尺码:L</p>
                        <div class="chaozuo">
                            <p class="single">￥1589</p>
                            <span class="sub">-</span>
                            <span class="shu">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>

            </article> -->
        </div>

        
    </section>
    <footer>
        <article class="top">
            <div class="all">
                <input name="checkbox"  type="checkbox" class="tui-checkbox all-btn">
                <p>ALL</p>
            </div>
            <div class="sum">
                <div class="count">
                    <p>
                        <span class="ji">合计:</span>
                        <span class="summoney">￥0.00</span>
                        <span class="sumcount">(0件)</span>
                    </p>
                    <span class="fee">含关税 不含运费</span>
                </div>
                <div>
                    <div class="countbtn">
                        去结算
                    </div>
                </div>
            </div>

        </article>

        
        <article class="bot">
                <figure>
                        <a href="#" class="iconfont icon-shouye"></a>
                        <figcaption>精选</figcaption>
                    </figure>
                    <figure style="margin-right: 1.2rem;">
                        <a href="#" class="iconfont icon-sousuo"></a>
                        <figcaption>分类</figcaption>
                    </figure>
        
                    <img src="../img/tutu.jpg" style="height: 1.48rem;width: 1.48rem" />
        
                    <figure style="margin-left: 1.2em;">
                        <a href="#" class="iconfont icon-gouwuche"></a>
                        <figcaption>购物车</figcaption>
                    </figure>
                    <figure>
                        <a href="#" class="iconfont icon-wode"></a>
                        <figcaption>我的</figcaption>
                    </figure>
        </article>
    </footer>
    <script>
        
        $(".bot img").hover(function () {
                $('.bot img').prop("src", '../img/hong1.jpg');
            }, function () {
                $(".bot img").prop("src", "../img/tutu.jpg");
			})
			$(".bot figure").hover(function (e) {
				let time =  $(this).index() 
				if($(this).index()>2){
					time -- 
				}
				$('.bot figure .iconfont').eq(time).css({color:'#000'});
                $('footer figure figcaption').eq(time).css({color:'#000'});
            }, function () {
				$('.bot figure .iconfont').css({color:'#999'});
				$('.bot figure figcaption').css({color:'#999'});
            })



        $('.tx').click(function () {
            location.href = 'settx.html'
        })


    </script>
    <script>
        // 全局ajax设置
        // 为所有的ajax请求都会加上这个请求头
        $(document).ajaxSend(function (event, xhr) {
        // token放到请求头中
        //xhr.setRequestHeader("token", window.localStorage.getItem("token"));
        //606e7d46b1db3fb41cc2f40fba48c27c
        //757e454832c69276307417876d052daa
        xhr.setRequestHeader("token",'757e454832c69276307417876d052daa');    
        // 是否ajax请求
        xhr.setRequestHeader("x-requested-with", "XMLHttpRequest");
        });

        let url1 = 'http://106.13.115.175:8080/elleshop/addGoodsToCart'
        let url2 = 'http://106.13.115.175:8080/elleshop/showShoppingCart'
        // $.ajax({
        //     async:true,
        //     type:'post',
        //     url:url1,
        //     data:{
        //         goodsNum:'1',
        //         goodsTypeId:'4'
        //     },
        //     success(res){
        //         console.log(res);
        //     },
        //     error(error){
        //         console.log(error);
        //     }
        // })

        $.ajax({
            async:true,
            type:'get',
            url:url2,
            success(res){
                console.log(res.info);
            let str = res.info.map(v=>
                `
                <article class="shoplist" style="margin-bottom: 0.15rem">
                    <input name="checkbox"  type="checkbox" class="tui-checkbox one-btn">
                    <div class="pho">
                            
                    </div>
                    <div class="detail" data-id="${v.goodsType.goodsTypeId}" data-price="${v.goodsType.price}">
                        <p class="chen" style="position: relative">${v.goodsType.goods.goodsMsg}<span class="delete" style="position: absolute;right:0;top:0;height:0.38rem;width:0.38rem;font-size:0.3rem;display:block;border:1px solid #eee;background:#f9f9f9;text-align:center;line-height:0.38rem">×</span></p>
                        <p class="dcolor">颜色: ${v.goodsType.color.colorName}</p>
                        <p class="dsize">尺码:${v.goodsType.size.sizeName}</p>
                        <div class="chaozuo">
                            <p class="single">￥${parseInt( v.goodsType.price )*parseInt( v.goodsNum )}.00</p>
                            <span class="sub">-</span>
                            <span class="shu">${v.goodsNum}</span>
                            <span class="add">+</span>
                        </div>
                    </div>
                </article>
                `
            ).join('')
            console.log(str)  
            $('.oUl').html(str)    

                // 加按钮
                // 减按钮 
                // 删除按钮
                // 输入框
                // 单选
                // 全选

            let addBtns = document.querySelectorAll('.shoplist .add')
			let subBtns = document.querySelectorAll('.shoplist .sub')
			let pnumIpts = document.querySelectorAll('.shoplist .shu')
			let deleteBtns = document.querySelectorAll('.shoplist .delete')
			let xiaojiBtns = document.querySelectorAll('.shoplist .single ')
			console.log(deleteBtns[0])
			//删除事件
			for (let i = 0; i < deleteBtns.length; i++) {
                //先删除后台数据
				deleteBtns[i].onclick = function() {

                    let goodsTypeId = $(this).parent().parent().attr('data-id')
                    console.log(goodsTypeId)

                    $.post('http://106.13.115.175:8080/elleshop/delGoodsFromCart',{
                        goodsTypeId,
                    },function(res){
                        console.log(res)
                    })
                    //在删除页面的节点
                    this.parentNode.parentNode.parentNode.remove()
                    
                    //在删除后还需要重新获取单选按钮 重点
                    selBtns = document.querySelectorAll('.one-btn')
                    

                    let arrDemo = []
                    let arrDemo11 = []
					for (let i = 0; i < $('.shoplist .single ').length; i++) {
                        let demo = $('.shoplist .single').eq(i).text();
                        let demo11 = $('.shoplist .shu').eq(i).text();
						if ($('.one-btn').eq(i).prop('checked')) {
                            arrDemo.push(parseInt(demo.split('￥')[1]))
                            arrDemo11.push(parseInt(demo11))
						}
					}
                    console.log(arrDemo)
                    if(arrDemo.length>0){
                        let sum = arrDemo.reduce(function(a, b) {
                            return a + b
                        })
                        console.log(sum)
                        zongjia.innerHTML = '￥'+sum

                        let sum11 = arrDemo11.reduce(function(a, b) {
                            return a + b
                        })
                        console.log(sum11)
                        shuliang.innerHTML = '('+sum11+'件'+')'
                    }else if(arrDemo.length==0){
                        zongjia.innerHTML = '￥'+ '0.00'
					    shuliang.innerHTML = '('+ 0 +'件'+')'
                    }
					
					if( zongjia.innerHTML >= 199 ){
						console.log('包邮')
						//baoyou.innerHTML = '您已满足包邮条件'
					}else{
						//baoyou.innerHTML = '您未满足包邮条件'
					}
					console.log( [...selBtns] )
					
					//删除按钮后从新判断全选按钮的checked属性
                    let selBtns2 = document.querySelectorAll('.one-btn')
                    if([...selBtns2].length==0){
                        allBtn.checked = false 
                    }else{
                        let falg = [...selBtns2].every(v => {
                            return v.checked == true
                        })
                        allBtn.checked = falg
                    }
					
				}
			}
			//加事件
			for (let i = 0; i < addBtns.length; i++) {
				addBtns[i].onclick = function() {
                    pnumIpts[i].innerHTML++
                    
                    let goodsTypeId = $(this).parent().parent().attr('data-id')
                    let price = $(this).parent().parent().attr('data-price') 
                    let goodsNum =  pnumIpts[i].innerHTML
					$.post('http://106.13.115.175:8080/elleshop/updateGoodsNum',{
                        goodsTypeId,
                        goodsNum
                    },function(res){
                        console.log(res)
                        xiaojiBtns[i].innerHTML = `￥${parseInt( goodsNum )*parseInt( price )}.00`
                    })
                   
				}
			}
            //减事件
            
            for (let i = 0; i < subBtns.length; i++) {
				subBtns[i].onclick = function() {
                    let goodsTypeId = $(this).parent().parent().attr('data-id')
                    let price = $(this).parent().parent().attr('data-price') 
					if (pnumIpts[i].innerHTML == 1) {
						return
					}
                    pnumIpts[i].innerHTML--
                    let goodsNum =  pnumIpts[i].innerHTML
                    $.post('http://106.13.115.175:8080/elleshop/updateGoodsNum',{
                        goodsTypeId,
                        goodsNum
                    },function(res){
                        console.log(res)
                        xiaojiBtns[i].innerHTML = `￥${parseInt( goodsNum )*parseInt( price )}.00`
                    })
				}
			}
			
			
			//计算总价用到的按钮
			// let baoyou = document.querySelector('aside #MyCart #baoyou')
			 let shuliang = document.querySelector('.sumcount')
			 let zongjia = document.querySelector('.summoney')
		

		
			// let yonghu = document.querySelector('.header .navbar_nav .welcome')
			// let exitBtn = document.querySelector('.header .navbar_nav .exitBtn')
			// let cartBtn1 = document.querySelector('.header .navbar_nav .cartBtn1')
			// console.log(exitBtn)
			// if (Cookies.get('username')) {
			// 	yonghu.innerHTML = `欢迎您 ${Cookies.get('username')}`
			// 	exitBtn.onclick = function() {
			// 		Cookies.remove('username')
			// 		location.reload()
			// 	}
			// 	cartBtn1.onclick = function() {
			// 		location.href = 'cart.html'
			// 	}
			// } else {
			// 	yonghu.onclick = function() {
			// 		location.href = '../../login/index.html'
			// 	}
			// 	cartBtn1.onclick = function() {
			// 		location.href = '../../login/index.html'
			// 	}
			// }

			//全选按钮 有一个单选没选就选不上
			let allBtn = document.querySelector('.all-btn')
			let selBtns = document.querySelectorAll('.one-btn')
			console.log(allBtn)
			console.log(selBtns)
			allBtn.onclick = function() {
				[...selBtns].forEach(v => {
					v.checked = allBtn.checked
				})
				//点击多选框计算总价
                let arr3 = []
                let arr33 = []
				if (this.checked) {
					console.log(1)
					for (let i = 0; i < xiaojiBtns.length; i++) {
                        arr3.push(parseInt(xiaojiBtns[i].innerHTML.split('￥')[1]))
                        arr33.push(parseInt(pnumIpts[i].innerHTML))
						let sum1 = arr3.reduce(function(a, b) {
							return a + b
                        })
                        let sum11 = arr33.reduce(function(a, b) {
							return a + b
						})
						console.log(sum1)
                        zongjia.innerHTML = '￥'+sum1
                        console.log(arr3)
						shuliang.innerHTML = '('+sum11+'件'+')'
						if( zongjia.innerHTML >= 199 ){
							console.log('包邮')
							//baoyou.innerHTML = '您已满足包邮条件'
						}else{
							//baoyou.innerHTML = '您未满足包邮条件'
						}
					}
				}
				if (!this.checked) {
					console.log(2)
					zongjia.innerHTML = '￥'+ '0.00'
					shuliang.innerHTML = '('+ 0 +'件'+')'
					if( zongjia.innerHTML >= 199 ){
						console.log('包邮')
						//baoyou.innerHTML = '您已满足包邮条件'
					}else{
						//baoyou.innerHTML = '您未满足包邮条件'
					}
				}
				
			}
			//单选按钮
			for (let i = 0; i < selBtns.length; i++) {
				selBtns[i].onclick = function() {
					let falg = [...selBtns].every(v => {
						return v.checked == true
					})
					allBtn.checked = falg

					//点击单选框计算总价
                    let arr2 = []
                    let arr22 = []
					for (let j = 0; j < [...selBtns].length; j++) {
						console.log(1)
						if (selBtns[j].checked) {
                            arr2.push(parseInt(xiaojiBtns[j].innerHTML.split('￥')[1]))
                            arr22.push(parseInt(pnumIpts[j].innerHTML))
							let sum = arr2.reduce(function(a, b) {
								return a + b
                            })
                            let sum22 = arr22.reduce(function(a, b) {
								return a + b
							})
							console.log(sum)
							zongjia.innerHTML = '￥'+sum
							shuliang.innerHTML = '('+sum22+'件'+')'
							if( zongjia.innerHTML >= 199 ){
								console.log('包邮')
								//baoyou.innerHTML = '您已满足包邮条件'
							}else{
								//baoyou.innerHTML = '您未满足包邮条件'
							}
						}
						let ress = [...selBtns].every(v => {
							return v.checked == false
						})
						console.log(ress)
						if (ress) {
							shuliang.innerHTML = '('+0+'件'+')'
							zongjia.innerHTML =  '￥'+'0.00'
							if( zongjia.innerHTML >= 199 ){
								console.log('包邮')
								//baoyou.innerHTML = '您已满足包邮条件'
							}else{
								//baoyou.innerHTML = '您未满足包邮条件'
							}
						}
					}

				}
			}
			
			//计算总价
			$('.shoplist .single').on('DOMNodeInserted', function() {
                let arrDemo = []
                let arrDemo11 = []
				for (let i = 0; i < $('.shoplist .single').length; i++) {
                    let demo = $('.shoplist .single').eq(i).text();
                    let demo11 = $('.shoplist .shu').eq(i).text();
					if ($('.one-btn').eq(i).prop('checked')) {
                        arrDemo.push(parseInt(demo.split('￥')[1]))
                        arrDemo11.push(parseInt(demo11))
					}
				}
                console.log(arrDemo)
                if(arrDemo.length>0){
                    let sum = arrDemo.reduce(function(a, b) {
                        return a + b
                    })
                    let sum11 = arrDemo11.reduce(function(a, b) {
                        return a + b
                    })
                    console.log(sum)
                    shuliang.innerHTML = '('+sum11+'件'+')'
                    zongjia.innerHTML = '￥'+sum
                }
				
				if( zongjia.innerHTML >= 199 ){
					console.log('包邮')
					//baoyou.innerHTML = '您已满足包邮条件'
				}else{
					//baoyou.innerHTML = '您未满足包邮条件'
				}
            })

			// let jiesuan = document.querySelector('#MyCart #cartPay')
			// let shu = document.querySelector('#MyCart #numcount')

            },
            error(error){
                console.log(error);
            }
        })
    
    
    </script>
</body>

</html>